<div class="containerStyle">
  <h3>描述</h3>
  <p>表格表头锁定特性</p>
  <p class="demo-text-warn">注意：使用 pagination 组件，请导入 TiPaginationModule</p>
  <h3>示例</h3>
  <ti-table [(displayedData)]="displayed" [srcData]="srcData" [columns]="columns">
    <!--.ti3-table-fixed-head是表头的容器，它的子元素中的table(thead)是实际显示的表头-->
    <!--注意:此处一定要使用.ti3-table-fixed-head样式类-->
    <div class="ti3-table-fixed-head">
      <table>
        <thead>
          <tr>
            <!--使用展开详情图标时，需要给展开详情图标列加 details-icon-column 属性-->
            <!--注意:给表格设置宽度时，给.ti3-table-fixed-head和.ti3-table-container下的对应的th都要设置-->
            <th details-icon-column>{{columns[0].title}}</th>
            <th tiOverflow width="{{columns[1].width}}">{{columns[1].title}}</th>
            <th tiOverflow width="{{columns[2].width}}">{{columns[2].title}}</th>
            <th tiOverflow width="{{columns[3].width}}">{{columns[3].title}}</th>
            <th tiOverflow width="{{columns[4].width}}">{{columns[4].title}}</th>
            <th tiOverflow width="{{columns[5].width}}">{{columns[5].title}}</th>
          </tr>
        </thead>
      </table>
    </div>
    <!--.ti3-table-container是表体的容器，它的子元素中的table的thead是用来控制各列宽度，实际不显示；tbody是实际显示的表体-->
    <!--注意1:此处一定要使用.ti3-table-container样式类-->
    <!--注意2:用户在有.ti3-table-container样式类的容器上来设置表体的高度或最大高度-->
    <div class="ti3-table-container" style="max-height: 300px">
      <table>
        <thead>
          <tr>
            <th details-icon-column></th>
            <th width="{{columns[1].width}}"></th>
            <th width="{{columns[2].width}}"></th>
            <th width="{{columns[3].width}}"></th>
            <th width="{{columns[4].width}}"></th>
            <th width="{{columns[5].width}}"></th>
          </tr>
        </thead>
        <tbody>
          <ng-container *ngFor="let row of displayed;index as i">
            <tr>
              <!--使用展开详情图标时，需要给展开详情图标列加 details-icon-column 属性-->
              <td details-icon-column>
                <ti-details-icon [row]="row" [index]="i"> </ti-details-icon>
                <!--详情图标设置，传入行数据-->
              </td>
              <td tiOverflow>{{row.firstName}}</td>
              <td tiOverflow>{{row.lastName}}</td>
              <td tiOverflow>{{row.age}}</td>
              <td tiOverflow>{{row.balance | currency}}</td>
              <td tiOverflow>{{row.email}}</td>
            </tr>
            <tr *tiDetailsTr="row">
              <!--详情内容行ti-details-tr，传入行数据-->
              <td tiColspan>
                <!--ti-colspan是为了使得该td（详情内容）占据表格整个宽度，本例中，作用相当于colspan='5'-->

                <div class="ti3-table-detail-container">
                  <div>详情展示：{{row.firstName}}</div>
                  <div>详情展示：{{row.balance}}</div>
                  <div>详情展示：{{row.lastName}}</div>
                </div>
              </td>
            </tr>
          </ng-container>
        </tbody>
      </table>
    </div>
    <ti-pagination [(currentPage)]="currentPage" [pageSize]="pageSize" [(totalNumber)]="totalNumber"> </ti-pagination>
  </ti-table>
</div>
